<template>
  <div>
    <div ref="legend" style="width: 400px;height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {

  mounted () {
    this.setLegend()
  },
  methods: {
    setLegend () {
      const obj = echarts.init(this.$refs.legend)
      // 给初始化好的对象,配置选项

      const option = {
        title: {
          text: "标题"
        },
        // 指明当前的数据是什么类型的
        legend: {
          // 普通的图例,scroll
          type: 'plain',
          // 默认水平 horizontal vertical垂直
          orient: 'horizontal',
          // 所有的图例都不显示 默认true显示,false都不显示
          // show: true,
          // 控制图例是否显示
          selected: {
            '销--量': true,
            利润: false
          },
          right: "10%",
          // bottom: 0,
          borderWidth: 4,
          width: 80,
          height: 200,
          padding: [0, 36, 36, 36]
        },
        // 柱状图
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        // 系列,系列里边有多个数据
        series: [
          {
            name: '销--量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }

        ]
      }
      obj.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
